<!--
 * @Description: 定制窗帘
 *
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-05-12 17:32:45
 * @FilePath: /yuxiuproweb/src/views/mes/pro/workorder/mods/room/curtain/index.vue
-->
<template>
  <el-collapse-item title="定制窗帘" name="1" disabled>
    <template slot="title">
      <i
        class="el-icon-circle-plus-outline mr10 expand"
        @click="handleExpand"
      ></i>
      定制窗帘
      <el-button
        type="primary"
        plain
        size="mini"
        icon="el-icon-plus"
        class="ml10"
        @click.stop="handleAddRoom()"
      >
        添加
      </el-button>
      <!-- <el-button
        type="success"
        plain
        size="mini"
        icon="el-icon-plus"
        class="ml10"
        v-if="data.state !== '3'"
        @click.stop="handleAddBatch()"
      >
        一键保存
      </el-button> -->
    </template>
    <el-form ref="form" :model="form" :rules="rules" inline size="mini">
      <el-table
        v-loading="loading"
        :data="form.list"
        :max-height="500"
        size="mini"
        border
      >
        <el-table-column
          label="号"
          type="index"
          align="center"
          width="40"
        ></el-table-column>
        <el-table-column label="房间" align="center" prop="name1" width="120">
          <template slot-scope="{ row, $index }">
            <el-form-item prop="name">
              <el-select
                style="width: 100%"
                v-model="row.room.name"
                filterable
                allow-create
                default-first-option
                placeholder="请选择房间名称"
              >
                <el-option
                  v-for="item in ROOMS"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="品名" align="center" prop="name" width="120">
          <template slot-scope="{ row, $index }">
            <el-form-item prop="name">
              <div
                @click="
                  () => {
                    part = {
                      show: true,
                      index: $index,
                    };
                  }
                "
              >
                <el-input
                  style="width: 100%"
                  v-model="row.name"
                  type="text"
                  readonly
                  placeholder="请输入"
                >
                  <!-- <template slot="append">选择</template> -->
                </el-input>
              </div>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="宽" align="center" prop="wright" width="70">
          <template slot-scope="{ row }">
            <el-form-item prop="wright">
              <el-input
                style="width: 100%"
                v-model="row.wright"
                type="text"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="高" align="center" prop="height" width="70">
          <template slot-scope="{ row }">
            <el-form-item prop="height">
              <el-input
                style="width: 100%"
                v-model="row.height"
                type="text"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="单价"
          align="center"
          prop="unitPrice"
          width="70"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="unitPrice">
              <el-input
                style="width: 100%"
                v-model="row.unitPrice"
                disabled
                type="text"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="加工方式"
          align="center"
          prop="processingMethodId"
          width="130"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="processingMethodId">
              <el-select
                v-model="row.processingMethodId"
                clearable
                placeholder="请选择"
                @change="
                  (val) => {
                    row.processingMethod = methodList.find(
                      (e) => e.processingMethodId === val
                    ).processingMethodName;
                  }
                "
              >
                <el-option
                  v-for="item in handleMethodList(row)"
                  :key="item.processingMethodId"
                  :label="item.processingMethodName"
                  :value="item.processingMethodId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="分片" align="center" prop="section" width="120">
          <template slot-scope="{ row, $index }">
            <el-form-item prop="section">
              <div
                @click="
                  () => {
                    zone = {
                      show: true,
                      index: $index,
                      data: {
                        ...row,
                      },
                    };
                  }
                "
              >
                <el-input
                  style="width: 100%"
                  :value="
                    row.magnification
                      ? `${
                          row.section === '3'
                            ? `${row.otherSection}片`
                            : row.section === '4'
                            ? row.largeSmallPiece
                            : getTypeName(
                                dict.type.order_curtain_section,
                                row.section
                              )
                        }|${row.magnification}`
                      : ''
                  "
                  readonly
                  type="text"
                  placeholder="请输入"
                >
                  <!-- <template slot="append">选择</template> -->
                </el-input>
              </div>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="方向"
          align="center"
          prop="direction"
          width="100"
        >
          <template slot-scope="{ row, $index }">
            <el-form-item prop="direction">
              <el-select
                v-model="row.direction"
                clearable
                placeholder="请选择"
                @change="handleDirectionChange(row, $index)"
              >
                <el-option label="定宽" value="0"> </el-option>
                <el-option label="定高" value="1"> </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center" prop="number" width="70">
          <template slot-scope="{ row }">
            <el-form-item prop="number">
              <el-input
                style="width: 100%"
                v-model="row.number"
                type="text"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="小计"
          align="center"
          prop="subtotal"
          width="100"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="subtotal">
              <div
                @click="
                  () => {
                    subtotal = {
                      show: true,
                      data: {
                        ...row,
                      },
                    };
                  }
                "
              >
                <span style="cursor: pointer; font-size: 20px"
                  >{{ row.subtotal
                  }}{{ row.updataPrice ? `(${row.updataPrice})` : "" }}</span
                >
                <!-- <el-input
                  style="width: 100%"
                  v-model="row.subtotal"
                  type="text"
                  placeholder="请输入"
                  readonly
                /> -->
              </div>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="图" align="center" prop="picture" width="60">
          <template slot-scope="{ row, $index }">
            <!-- <el-form-item prop="picture">
              <image-upload
                v-model="row.picture"
                :isShowTip="false"
                :limit="1"
              />
            </el-form-item> -->
            <div
              style="cursor: pointer"
              @click="
                () => {
                  image = {
                    show: true,
                    data: {
                      ...row,
                    },
                    index: $index,
                  };
                }
              "
            >
              {{ row.picture ? getImageNum(row.picture) : "空" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="加工备注"
          align="center"
          prop="processingRemarks"
          min-width="100"
        >
          <template slot-scope="{ row }">
            <el-form-item
              prop="processingRemarks"
              :title="row.processingRemarks"
            >
              <el-input
                style="width: 100%"
                v-model="row.processingRemarks"
                type="textarea"
                autosize
                placeholder="请输入"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column
          label="明细"
          align="center"
          prop="detail"
          min-width="150"
        >
          <template slot-scope="{ row, $index }">
            <el-form-item prop="detail" :title="row.detail">
              <div
                @click="
                  () => {
                    info = {
                      show: true,
                      data: {
                        ...row,
                      },
                      index: $index,
                    };
                  }
                "
              >
                <el-input
                  style="width: 100%"
                  v-model.trim="row.detail"
                  type="textarea"
                  autosize
                  readonly
                  placeholder="请输入"
                />
              </div>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="复杂加工"
          align="center"
          prop="complexMachiningIds"
          width="100"
        >
          <template slot-scope="{ row, $index }">
            <el-form-item prop="complexMachiningIds">
              <el-select
                v-model="row.complexMachiningIds"
                placeholder="请选择"
                clearable
                filterable
                multiple
                @change="handleComplexMachining(row, $index)"
              >
                <el-option
                  v-for="item in machiningList"
                  :key="item.mdComplexMachiningId"
                  :label="item.complexMachiningName"
                  :value="item.mdComplexMachiningId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="布绑"
          align="center"
          prop="detail"
          min-width="100"
        >
          <template slot-scope="{ row, $index }">
            <el-form-item>
              <div
                @click="
                  () => {
                    straps = {
                      show: true,
                      data: {
                        ...row,
                      },
                      index: $index,
                    };
                  }
                "
              >
                <el-input
                  style="width: 100%"
                  :value="row.strap ? row.strap.name : ''"
                  type="text"
                  readonly
                  placeholder="请输入"
                />
              </div>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="余料" align="center" prop="oddments" width="70">
          <template slot-scope="{ row }">
            <el-form-item prop="oddments">
              <el-select v-model="row.oddments" clearable placeholder="请选择">
                <el-option label="无" value="0"> </el-option>
                <el-option label="寄回" value="1"> </el-option>
                <el-option label="加工" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="170"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="
                () => {
                  if (data.state === '3') {
                    change = {
                      show: true,
                      data: scope.row,
                      list: [
                        {
                          name: `修改 定制窗帘 ${scope.$index + 1}号`,
                          address: '',
                        },
                      ],
                    };
                  } else {
                    handleSave(scope.row);
                  }
                }
              "
              v-hasPermi="['md:order:edit']"
              >保存</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              :disabled="data.state === '3'"
              @click="handleCopyClick(scope.row)"
              >复制</el-button
            >
            <!-- <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              :disabled="!scope.row.proOrderCustomCurtainId"
              @click="handleStraps(scope)"
              v-hasPermi="['md:order:edit']"
              >布绑</el-button
            > -->
            <!-- :disabled="data.state === '3'" -->
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row, scope.$index)"
              v-hasPermi="['md:order:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <!-- 选择品名 -->
    <part-view
      v-if="part.show"
      :show.sync="part.show"
      v-bind="part"
      @on-change="handlePartChange"
    ></part-view>
    <!-- 分片 -->
    <zone-view
      v-if="zone.show"
      :show.sync="zone.show"
      v-bind="zone"
      @on-change="handleZoneChange"
    ></zone-view>
    <!-- 布绑 -->
    <straps-view
      v-if="straps.show"
      :show.sync="straps.show"
      v-bind="straps"
      @on-change="handleStrapsSubmit"
      @on-clean="handleClean"
    ></straps-view>
    <!-- 房间 -->
    <room-view
      v-if="room.show"
      :show.sync="room.show"
      v-bind="room"
      @on-change="handleRoomChange"
    ></room-view>

    <!-- 复制 -->
    <copy-view
      v-if="copy.show"
      :show.sync="copy.show"
      v-bind="copy"
      @update="setData"
    ></copy-view>

    <!-- 价格明细 -->
    <subtotal-view
      v-if="subtotal.show"
      :show.sync="subtotal.show"
      v-bind="subtotal"
      @update="getListOrderCustomCurtain()"
    ></subtotal-view>

    <!-- 明细 -->
    <info-detail
      v-if="info.show"
      :show.sync="info.show"
      v-bind="info"
      @on-change="handleInfoChange"
    ></info-detail>

    <!-- 图片 -->
    <image-view
      v-if="image.show"
      :show.sync="image.show"
      v-bind="image"
      @on-change="handleImageChange"
    ></image-view>

    <!-- 变更单 -->
    <change-view
      v-if="change.show"
      :show.sync="change.show"
      v-bind="change"
      @on-change="handleSave"
    ></change-view>
  </el-collapse-item>
</template>

<script>
import {
  listOrderCustomCurtain,
  getOrderCustomCurtain,
  addOrderCustomCurtain,
  updateOrderCustomCurtain,
  delOrderCustomCurtain,
  batchEditOrderCustomCurtain,
} from "@/api/asc/curtain";
import { listMachining, getMachining } from "@/api/process/machine";
import { listMethod } from "@/api/process/way";
import { listStraps, getStraps, updateStraps } from "@/api/asc/straps";
import PartView from "../../add/part.vue";
import ZoneView from "../../add/zone.vue";
import RoomView from "../../add/room.vue";
import CopyView from "../../add/copy.vue";
import StrapsView from "../straps/add";
import SubtotalView from "./subtotal.vue";
import InfoDetail from "../../add/infoDetail.vue";
import ImageView from "../../add/image.vue";
import ChangeView from "../../add/change.vue";
import { ROOMS } from "../configure";
const FORM = {
  proOrderCustomCurtainId: null,
  orderHighEndCustomizationId: null,
  orderId: null,
  customCurtainId: null,
  name: null,
  wright: null,
  height: null,
  unitPrice: null,
  processingMethodId: null,
  processingMethod: null,
  wallWidth: null,
  wallHeight: null,
  largeSmallPiece: null,
  section: null,
  otherSection: null,
  magnification: null,
  direction: "0",
  number: "1",
  subtotal: null,
  picture: null,
  processingRemarks: null,
  oddments: "0",
  detail: null,
  pid: null,
  type: null,
  room: {
    name: "",
  },
  strap: null,
};
export default {
  dicts: ["order_curtain_section"],
  components: {
    PartView,
    ZoneView,
    StrapsView,
    RoomView,
    CopyView,
    SubtotalView,
    InfoDetail,
    ImageView,
    ChangeView,
  },
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
  },
  data() {
    return {
      ROOMS,
      activeNames: "1",
      loading: false,
      room: {
        show: false,
        index: 0,
        data: null,
      },
      zone: {
        show: false,
        index: 0,
        data: null,
      },
      part: {
        show: false,
        index: 0,
      },
      straps: {
        show: false,
        index: 0,
        data: null,
      },
      copy: {
        show: false,
        data: null,
      },
      subtotal: {
        show: false,
        data: null,
      },
      info: {
        show: false,
        data: null,
        index: 0,
      },
      image: {
        show: false,
        data: null,
        index: 0,
      },
      form: {
        list: [{ ...FORM }],
      },
      change: {
        show: false,
        data: null,
        list: [],
      },
      oldList: [], // 缓存历史数据
      rules: {},
      methodList: [],
      machiningList: [],
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  created() {
    this.getListOrderCustomCurtain();
    this.getMethodList();
    this.getMachiningList();
  },
  methods: {
    getMachiningList() {
      listMachining({
        pageNum: 1,
        pageSize: 500,
      }).then(({ rows }) => {
        this.machiningList = rows;
      });
    },
    async getListOrderCustomCurtain() {
      const { rows } = await listOrderCustomCurtain({
        pageNum: 1,
        pageSize: 5000,
        orderId: this.data?.proOrderId,
      });
      this.form.list = rows?.map((e) => {
        return {
          ...e,
          room: {
            ...e.room,
          },
          complexMachiningIds: (e.complexMachiningIds
            ? e.complexMachiningIds?.split(",")
            : []
          )?.map((e) => +e),
        };
      });
      this.oldList = JSON.parse(JSON.stringify(this.form.list));
      this.$emit("on-refresh-price");
      this.form.list?.length && this.$emit("active", "1");
    },
    getMethodList() {
      listMethod({
        pageNum: 1,
        pageSize: 5000,
      }).then(({ rows }) => {
        this.methodList = rows;
      });
    },
    handleMethodList(row) {
      if (row.type === "3") {
        return this.methodList.filter((e) => e.field === "1") || [];
      } else {
        return this.methodList.filter((e) => e.field !== "1") || [];
      }
    },
    // 判断图片数量
    getImageNum(images) {
      const list = images?.split(",");
      return `${list?.length}张`;
    },
    handleImageChange(data) {
      const row = this.form.list[this.image.index];
      row.picture = data.picture;
      this.$set(this.form.list, this.image.index, row);
    },

    // 获取布绑材料
    async getStraps(id) {
      const res = await getStraps(id);
      this.strapsData = res.data;
      return res.data.productFabrics;
    },
    // 布绑
    async getStrapsList(orderCustomCurtainId) {
      const { rows } = await listStraps({
        pageNum: 1,
        pageSize: 1,
        orderCustomCurtainId,
      });

      if (rows?.length) {
        const list = await this.getStraps(
          rows?.[0]?.orderCustomCurtainStrapsId
        );
        return list?.map((e) => {
          return {
            direction: e.direction,
            fabricId: e.fabricId,
            fabricWidth: e.larghezza,
            fabricName: e.name,
            number: e.number,
            part: e.part,
            source: e.source,
            part2: e.part2,
            type: "-2",
            unit: e.unit,
            wholesalePrice1: "",
            checked: false,
            subIndex: 100,
          };
        });
      }
      return [];
    },

    handleDirectionChange(row, index) {
      row.fabricList = row.fabricList?.map((e) => {
        return {
          ...e,
          direction: row.direction,
        };
      });
      if (row.strap?.productFabrics.length) {
        row.strap.productFabrics = row.strap.productFabrics?.map((e) => {
          return {
            ...e,
            direction: row.direction,
          };
        });
      }
      this.$set(this.form.list, index, row);
    },

    async setDetail(row, index) {
      let detail = row.fabricList?.map((e) => e.name)?.join("|");
      const complexMachiningName = this.machiningList
        ?.filter((e) =>
          row.complexMachiningIds?.includes(e.mdComplexMachiningId)
        )
        ?.map((e) => e.complexMachiningName)
        ?.join();

      const item = row.fabricList?.find(
        (e) => e.part === "-1" && e.part2 === "-1"
      );
      row.direction = item.direction;

      row.detail = `${detail}${
        complexMachiningName ? `|${complexMachiningName}` : ""
      }${
        row.strap?.productFabrics?.length
          ? `|${row.strap?.productFabrics?.map((e) => e.name).join("|")}`
          : row.strap?.name || ""
      }`;
      this.$set(this.form.list, index, row);
    },

    async getMachining(id) {
      const res = await getMachining(id);
      return res.data.complexMachiningFabricList?.map((v) => {
        return {
          direction: "",
          fabricId: v.fabricId,
          larghezza: v.width,
          name: v?.fabricName,
          number: "",
          part: v.part,
          source: "",
          part2: v.type,
          type: v.type,
          unit: "",
          wholesalePrice1: v?.wholesalePrice || null,
          fabricFlag: "1",
        };
      });
    },

    // 选择复杂加工
    async handleComplexMachining(row, index) {
      const list = this.machiningList.filter((e) =>
        row.complexMachiningIds?.includes(e.mdComplexMachiningId)
      );
      console.log(this.machiningList);
      console.log(row.complexMachiningIds);
      let fabricList =
        (row?.fabricList || [])?.filter((e) => `${e?.fabricFlag}` !== "1") ||
        [];

      console.log(row?.fabricList);
      console.log(fabricList);

      await Promise.all(
        list?.map(async (e) => {
          const res = await this.getMachining(e.mdComplexMachiningId);
          console.log(res);
          res?.forEach((v) => {
            fabricList.push(v);
          });
        })
      );

      console.log(fabricList);
      this.$set(this.form.list, index, {
        ...row,
        fabricList,
      });
      this.setDetail(this.form.list[index], index);
    },

    handlePartChange(part, fabricList, straps = null) {
      switch (part.types) {
        case "gd": {
          const row = this.form.list[this.part.index];
          row.name = part.name;
          row.orderHighEndCustomizationId = part.highEndCustomizationId;
          row.customCurtainId = null;
          row.unitPrice = part.wholesalePrice;
          row.fabricList = fabricList;
          row.complexMachiningIds = [];
          row.direction = part.direction;
          row.type = part.type === "1" ? "3" : "0";
          row.processingMethodId = null;
          row.strap = {
            ...straps,
            otherMaterialId: "",
          };
          this.$set(this.form.list, this.part.index, row);
          this.setDetail(row, this.part.index);
          break;
        }
        case "curtain": {
          const row = this.form.list[this.part.index];
          row.name = part.name;
          row.unitPrice = part.wholesalePrice;
          row.customCurtainId = part.customCurtainId;
          row.orderHighEndCustomizationId = null;
          row.direction = part.direction;
          row.fabricList = fabricList;
          row.complexMachiningIds = [];
          row.strap = straps;
          row.type = "0";
          row.processingMethodId = null;
          this.$set(this.form.list, this.part.index, row);
          this.setDetail(row, this.part.index);
          break;
        }
        default:
          break;
      }
    },

    // 明细保存
    handleInfoChange(list, bdList) {
      const row = this.form.list[this.info.index];
      row.fabricList = list;
      const item = list.find((e) => e.part === "-1" && e.part2 === "-1");
      row.unitPrice = item?.wholesalePrice1 || row.unitPrice;

      if (bdList.length) {
        row.strap.productFabrics = bdList;
      }
      this.$set(this.form.list, this.info.index, row);
      this.setDetail(row, this.info.index);
    },

    handleZoneChange(data) {
      const row = this.form.list[this.zone.index];
      this.$set(this.form.list, this.zone.index, {
        ...row,
        ...data,
        otherSection: data.section === "3" ? data.otherSection : null,
      });
    },
    handleChange(val) {
      console.log(val);
    },
    // 添加一条
    handleAddRoom() {
      this.form.list.push({
        ...FORM,
        room: {
          name: "",
        },
      });
      this.$emit("active", "1");
    },
    handleExpand() {
      this.$emit("active", "1", "1");
    },
    // 批量保存
    handleAddBatch() {
      if (!this.form.list?.length) return;
      const params = this.form.list?.map((e) => {
        return {
          ...e,
          complexMachiningIds: e.complexMachiningIds?.join() || "",
          orderId: this.data?.proOrderId,
        };
      });
      this.loading = true;
      batchEditOrderCustomCurtain(params)
        .then((response) => {
          this.$modal.msgSuccess("保存成功");
          this.getListOrderCustomCurtain();
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 保存
    handleSave(row) {
      const params = {
        ...row,
        complexMachiningIds: row.complexMachiningIds?.join() || "",
        orderId: this.data?.proOrderId,
      };
      this.loading = true;
      if (params.proOrderCustomCurtainId != null) {
        updateOrderCustomCurtain(params)
          .then(async (response) => {
            this.$modal.msgSuccess("修改成功1");
            this.loading = false;

            const item = this.oldList.find(
              (e) =>
                e.proOrderCustomCurtainId === params.proOrderCustomCurtainId
            );

            await this.getListOrderCustomCurtain();

            const item1 = this.form.list.find(
              (e) =>
                e.proOrderCustomCurtainId === params.proOrderCustomCurtainId
            );

            if (this.data.state === "3") {
              this.$emit(
                "on-submit",
                [item, item1],
                "0",
                item1,
                this.change.list?.[0].name || "",
                "1"
              );
            }
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        addOrderCustomCurtain(params)
          .then(async (response) => {
            console.log(response);
            this.$modal.msgSuccess("新增成功");

            await this.getListOrderCustomCurtain();

            const item1 = this.form.list.find(
              (e) => e.proOrderCustomCurtainId === response.data
            );

            if (this.data.state === "3") {
              this.$emit(
                "on-submit",
                [item1],
                "0",
                item1,
                this.change.list?.[0].name || "",
                "0"
              );
            }
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    /** 删除按钮操作 */
    handleDelete(row, index) {
      if (row.proOrderCustomCurtainId) {
        const proOrderCustomCurtainIds = row.proOrderCustomCurtainId;
        this.$modal
          .confirm('是否确认删除"' + row.name + '"的数据项？')
          .then(function () {
            return delOrderCustomCurtain(proOrderCustomCurtainIds);
          })
          .then(() => {
            this.getListOrderCustomCurtain();
            this.$modal.msgSuccess("删除成功");

            if (this.data.state === "3") {
              this.$emit(
                "on-submit",
                [row],
                "0",
                row,
                `删除 定制窗帘 ${index + 1}号`,
                "2"
              );
            }
          })
          .catch(() => {});
      } else {
        this.form.list?.splice(index, 1);
      }
    },
    // 布绑
    handleStraps({ row, $index }) {
      this.straps = {
        show: true,
        index: $index,
        data: {
          ...row,
        },
      };
    },
    // 布绑清除
    handleClean() {
      const row = this.form.list[this.straps.index];
      row.strap = null;
      this.$set(this.form.list, this.straps.index, {
        ...row,
      });
      this.setDetail(row, this.straps.index);
    },
    // 布绑回调
    async handleStrapsSubmit(data, fabricList) {
      const row = this.form.list[this.straps.index];
      console.log(row);
      row.strap = data;
      row.fabricList = fabricList;
      this.$set(this.form.list, this.straps.index, {
        ...row,
      });

      await this.setDetail(row, this.straps.index);

      console.log(data);
      console.log(this.form.list);
      // await this.setDetail(this.straps.data, this.straps.index);
      // this.handleSave(this.straps.data);
      // getListOrderCustomCurtain()
    },
    // 房间
    handleRoomChange(data) {
      const row = this.form.list[this.room.index];
      this.$set(this.form.list, this.room.index, {
        ...row,
        room: {
          ...data,
          orderId: this.data?.proOrderId,
          productId: row.proOrderCustomCurtainId || "",
          type: "0",
        },
      });
    },
    // 复制
    handleCopyClick(data) {
      this.copy = {
        show: true,
        data: {
          ...data,
        },
      };
    },
    // 复制回调
    setData(list) {
      this.form.list = [
        ...this.form.list,
        ...list?.map((e) => {
          return {
            ...e,
            room: {
              height: e.room.height,
              name: e.room.name,
              orderId: e.room.orderId,
              picture: e.room.picture,
              productId: "",
              remark: e.room.remark,
              type: e.room.type,
              width: e.room.width,
            },
            proOrderCustomCurtainId: null,
          };
        }),
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .cell {
    padding-left: 4px;
    padding-right: 4px;
  }
}
.expand {
  cursor: pointer;
}

::v-deep {
  .el-table--border,
  .el-table--group {
    border: 1px solid rgb(150, 150, 150) !important;
  }
  /**
改变表格内竖线颜色
 */
  .el-table--border td,
  .el-table--border th,
  .el-table__body-wrapper
    .el-table--border.is-scrolling-left
    ~ .el-table__fixed {
    border-right: 1px solid rgb(150, 150, 150) !important;
  }
  /**
改变表格内行线颜色
 */
  .el-table td,
  .el-table th.is-leaf,
  .el-table__cell {
    border-bottom: 1px solid rgb(150, 150, 150) !important;
  }
}
</style>
